/* typehints:start */
import { Npc } from "../../npcs/npc";
import { People } from "../../people";
/* typehints:end */

import { formatSecondsToTimeAgo, getObjectType, makeDiv, waitNextFrame } from "../../../core/utils/utils";
import { BaseHUDPart } from "../base_hud_part";
import { DynamicDom } from "../dynamic_dom";
import { SelectBtnGroup } from "../select_btn_group";

export class HUDLogsBoard extends BaseHUDPart{
  constructor(root){
    super(root);
  }

  createElements(parent){
    this.element = makeDiv(
			parent,
			"logs_board",
			["remove", 'alert_board'],
			`
      <div class="screen"></div>
      <div class="close-btn"><img src="res/ui/icons/close.svg" /></div>
      <div class="content">
        <div class="btn-group"></div>

        <div class="wrapper">
          <div class="page world-page">

          </div>
          <div class="page logs-page">

          </div>
        </div>
      </div>
    `
		);
  }
  
  initialize(){
    this.domAttach = new DynamicDom(this.root, this.element);

    this.selectBtns = new SelectBtnGroup(this.root, this.element.querySelector('.content'), '.btn-group', [
      {
        text: '世界',
        page: '.wrapper|world-page',
        active: true,
        click: () => {
          this.element.querySelector('.content').scrollTop = 10000000;
        }
      },
      {
        text: '日志',
        page: '.wrapper|logs-page',
        click: () => {
          this.element.querySelector('.content').scrollTop = 10000000;
        }
      }
    ]);

    this.logsText = [];

    this.bindCloseBtn();
  }

  internalShow(){
    this.domAttach.internalAttach();

    this.renderLogs();
    this.selectBtns.setActive();
  }

  internalHide(){
    this.domAttach.internalDetach(true);
  }

  renderLogs(){
    let logParent = this.element.querySelector('.logs-page');
    let worldParent = this.element.querySelector('.world-page');
    logParent.innerHTML = '';
    worldParent.innerHTML = '';

    this.logsText.slice(-50).forEach(item => {
      let parent = worldParent;

      if(item.type === 'log') parent = logParent;
      else if(item.type === 'world') parent = worldParent;

      let dom = makeDiv(parent, '', ['log'], `
        <p>${item.send}: ${item.text}</p>
        <p class="min-text">${formatSecondsToTimeAgo(item.date)} | ${item.time}</p>
      `);
    })
  }

  add(data){
    this.logsText.push(data);
    this.renderLogs();
    // let parent = this.element.querySelector('.logs-page');

    // let dom = makeDiv(parent, '', ['log'], `
    //   <p>${data.send}: ${data.text}</p>
    //   <p class="min-text">${data.time} ${}</p>
    // `);
    // dom.style.color = data.color;
  }

  bindCloseBtn(){
    let screen = this.element.querySelector('.screen');

    this.trackClicks(screen, this.internalHide.bind(this), {
      applyCssClass: ''
    });
  }
}